all files / flexbox/ flexboxItem.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
//
//
//
//
//
//
 
export default {
  name: 'mu-flexbox-item',
  props: {
    order: {
      type: [Number, String],
      default: 0
    },
    grow: {
      type: [Number, String],
      default: 1
    },
    shrink: {
      type: [Number, String],
      default: 1
    },
    basis: {
      type: [Number, String],
      default: 'auto'
    }
  },
  computed: {
    itemStyle () {
      let styles = {}
      let marginName = this.$parent.orient === 'horizontal' ? 'marginLeft' : 'marginTop'
      styles[marginName] = `${this.$parent.gutter}px`
      styles['flex'] = `${this.grow} ${this.shrink} ${this.basis}`
      styles['order'] = this.order
      return styles
    }
  }
}